// 存放项目中配置数据的小仓库
import { defineStore } from "pinia";
import { ref } from 'vue';

export const useLayoutSettingStore = defineStore('layoutSetting', () => {
    // 用来控制菜单列表的展开和折叠
    let isFold = ref(false);
    // 用来控制二级路由组件的创建与销毁
    let isRefresh = ref(false);
    // 用来控制项目中按钮的颜色(下面是默认颜色)
    let color = ref('#409eff');
    // 控制项目暗黑主题的设置
    let dark = ref(false);

    // 设置项目中按钮的颜色
    const setColor = () => {
        // 获取根节点
        let html = document.documentElement;
        // 设置全局变量的颜色（通过 js 控制 css 变量）
        html.style.setProperty("--el-color-primary", color.value);
    }
    // 设置项目的暗黑主题
    const setDarkTheme = () => {
        // 获取html根节点
        let html = document.documentElement;
        // 根据开关的切换，给项目添加暗黑主题
        html.className = dark.value ? "dark" : "";
    }
    return {
        isFold,
        isRefresh,
        color,
        setColor,
        dark,
        setDarkTheme
    }
}, {
    persist: {
        key: 'themeVar',
        pick: ['color', 'dark']
    }
});